import React, { Component } from 'react'

export default class App extends Component {
    state = {
        name: '张三',
        age: 18,
        h: 150
    }

    changeValue(e) {
        console.log(e);
        // e.target.name 就是标签中设置的 name 属性值
        // e.target.value 就是输入中输入的内容
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    render() {
        return (
            <div>
                <h1>{this.state.name} -- {this.state.age} -- {this.state.h}</h1>




                <hr />

                {/* 具有 value 和 onChange 方法的输入框叫做受控的表单 */}
                <input name='name' value={this.state.name} onChange={(e) => {
                    this.changeValue(e)
                }} type="text" />

                <input name='age' value={this.state.age} onChange={e => { this.changeValue(e) }} type="text" />


                <input name='h' value={this.state.h} onChange={e => { this.changeValue(e) }} type="text" />


            </div>
        )
    }
}
